<template>
	<view class="bgbg">
		<img v-if="token" src="./edit.png" alt=""
			style="width: 40rpx;height: 40rpx;position: absolute;top: 158rpx;right: 554rpx;">
		<view class="personal">
			<view class="">
				<view class="login_box">
					<view class="user_avatar">
						<button v-if="!token" style="align-items:flex-start;padding-left: 0;" class="kf_button"
							open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							<u-avatar :src="tou" size="67" class="avatar"></u-avatar>
						</button>
						<u-avatar v-else :src="tou" size="67" class="avatar" @click="handleUpdataUser"></u-avatar>
					</view>
					<view class="login_btn">
						<!-- @click="handleLogin"  原本的登录 -->
						<view v-if="!token">
							<button style="align-items:flex-start;padding-left: 0;" class="kf_button"
								open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
								<h1 style="padding-left: 0;color: #B5C3E0;">登录/注册</h1>
							</button>
							<view class="xiaozi"> 期待与您一起关注脑健康 </view>
						</view>
						<view class="" v-else @click="handleUpdataUser">
							<h1 style="color:#5599FF;">{{ nickName }}</h1>
							<view class="xiaozi"> 感谢关注爱脑行动 </view>
						</view>
					</view>
					<view v-if="token" @click="handleLoginOut" class="xiaozi" style="width: 160rpx;font-size: 24rpx;">
						安全退出 </view>
				</view>
			</view>
			<!-- <view class="card opt">
				<view style="padding: 10px">
					<u-grid :border="false">
						<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex"
							@click="click(baseListItem)">
							<u-icon :customStyle="{ width: 574 + 'rpx',height:158+ 'rpx' }" :name="baseListItem.name" >
							</u-icon>
							<text class="grid-text">{{ baseListItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view> -->
			<view class="ScreeningResult" v-if="!token">
				
					<button class="cha"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<image src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/unscreened.png"
						mode="widthFix"></image>
					</button>
				<!-- <image class="empty2" src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/empty2.png" mode="widthFix"></image> -->
				<!-- <image v-else src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/ScreeningResult.png" mode="widthFix"></image> -->

			</view>

			<view class="ScreeningResult" v-else>
				<view class="" v-if="Object.keys(data).length>0" @click="goReport">
					<image  class="cha"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/ScreeningResult.png"
						mode="widthFix"></image>
				</view>
				<view class="ScreeningResult" v-else>
					<button @click="goPersonal" class="cha">
						<image src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/unscreened.png"
						mode="widthFix"></image>
					</button>
					<image class="empty2"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/empty2.png"
						mode="widthFix"></image>
				</view>

			</view>



			<!-- <view class="join_qun">
				<view class="text1"> 限时免费享更多福利服务 </view>
				<button class="text2" open-type="contact" session-from="weapp">
					<text style="margin-right: 10rpx">点击进群</text>
					<img style="height: 18rpx; width: 12rpx; margin: auto"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/xiaojiantou.png" alt="" /> -->

			<!-- 	<view class="">
						<img style="height: 18rpx; width: 12rpx; margin-left: 5px"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/xiaojiantou.png" alt="" />
					</view> -->
			<!-- </button> -->
			<!-- 		<view class="text2">
					点击进群<img style="height: 18rpx; width: 12rpx; margin-left: 5px"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/xiaojiantou.png" alt="" />
				</view> -->
			<!-- </view> -->
			<!-- <view class="fengxian">
				<view class="left"> 其他风险评估测评 </view>
				<view class="right">
					查看详情<img style="height: 18rpx; width: 12rpx; margin-left: 5px"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/xiaojiantou.png" alt="" />
				</view>
			</view> -->
			<!-- <view class="img_atten">
				<view class="title"> 扫码关注享更多 </view>
				<view class="img"> -->
			<!-- <view class="left"> -->
			<!-- <u-image :showLoading="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/erweima1.png"
							width="160rpx" height="160rpx">
						</u-image> -->
			<!-- <u-image :showLoading="true" src="/static/personal/ainao.jpg" width="160rpx" height="160rpx">
						</u-image> -->
			<!-- <view class="text">
							<h1>长按关注公众号</h1>
							<h1>获取更多脑健康知识</h1>
						</view> -->
			<!-- </view> -->
			<!-- <view class="right"> -->
			<!-- <u-image :showLoading="true"
							src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/chatQRcode.jpg"
							width="160rpx" height="160rpx">
						</u-image> -->
			<!-- 						<u-image :showLoading="true" src="/static/personal/ainao.jpg" width="160rpx" height="160rpx">
						</u-image> -->
			<!-- <view class="text">
							<h1>进群享受志愿者专业指</h1>
							<h1>导服务</h1>
						</view> -->
			<!-- </view> -->
			<!-- 	</view>
			</view> -->
			<u-toast ref="uToast"></u-toast>
		</view>
		<tabBar></tabBar>
		<!-- 联系客服 -->
		<!-- <button class="kf_button fixed" open-type="contact" session-from="weapp">
			<view class="kf_image">
				<image class="kf_image" src="/static/personal/connect.png"></image>
			</view>

			<view class="connect"> 咨询客服 </view>
		</button> -->
		<!-- 	<button v-show="token" type="primary" style="margin: 40rpx 35rpx; background-color: #66ffb5; color: black"
			@click="handleLoginOut">
			退出
		</button> -->
		<!-- <official-account></official-account> -->
	</view>
</template>

<script>
	// import av from '@/static/personal/morenAv.png'
	// import aboutus from '@/static/personal/aboutus.png'
	// import ceshibaogao from '@/static/personal/ceshibaogao.png'
	// import orgorg from '@/static/personal/orgorg.png'
	import {
		getReport,
		login,
		loginlog,
		auditStatus
	} from "@/api/api.js";
	import {
		mapState
	} from "vuex";
	import {

		getUrl
	} from "@/config.js";
	export default {
		data() {
			return {
				code: '',
				baseUrl: getUrl(),
				baseList: [{
						name: "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/ScreeningResult.png",
						title: "筛查报告",
						key: "report",
					},
					// {
					// 	name: "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/unscreened.png",
					// 	title: "我要筛查",
					// 	key: "about",
					// },
					// {
					// 	name: "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/orgorg.png",
					// 	title: "机构管理",
					// 	key: "org",
					// },
				],
				data: {}
			};
		},
		computed: {
			...mapState({
				token: (state) => state.token,
				avatar: (state) => state.userInfo.avatarUrl,
				nickName: (state) => state.userInfo.nickName,
			}),
			tou() {
				return this.avatar ?
					this.avatar :
					"https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/head.png";
			},
		},
		methods: {
			goReport() {
				var param = {};
				param.ipContent = "查看报告结果";
				param.token = this.$store.state.token;
				loginlog(param).then(
					(res) => {
						console.log(res);
					}
				);
				uni.navigateTo({
					url: "/pages/middleScreening/result/result",
				});
			},
			goPersonal() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/middleScreening/screening/screening",
					});

				} else {
					this.$refs.uToast.show({
						type: "error",
						message: "请登录后进行操作",
						icon: "https://cdn.uviewui.com/uview/demo/toast/error.png",
					});
				}
			},
			
			report(params = {}) {
					getReport(params).then(res => {
					console.log('res王', res)
					const {
						data
					} = res
					this.data = data.data || {}
					// this.data.assessResult = 2
					// this.data.detailContents[0].result = '异常'
					// this.data = {}
					console.log('datttttttaa',data)
				})
			},
			
			handleUpdataUser() {
				uni.navigateTo({
					url: '/pages/personal/login/login'
				})
			},
			getPhoneNumber(e) {
				// 获取手机号 encryptedData iv
				console.log(e.detail, 'eeeeeeeeeeeee')
				const _this = this
				//发起网络请求
				if (!e.detail.encryptedData) return
				login({
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					code: this.code,
					promotionCode: this.$store.state.promotionCode,
				}).then(
					(res) => {
						_this.$refs.uToast.show({
							type: "success",
							message: res.msg,
						});
						// 设置vuex 和 本地缓存
						uni.setStorageSync("token", res.token);
						_this.$store.commit("set_token", res.token);
						_this.$store.dispatch('checkUser');
						
						this.report()
					},
					(err) => {
						_this.$refs.uToast.show({
							type: "error",
							message: err.msg,
						});
						_this.$store.dispatch("clearStorage");
					}
				);

			},
			handleLoginOut() {
				this.$store.dispatch("clearStorage");
				this.getCode()
				
			},
			click(item) {
				// 1.判断token 是否进入
				// 2.进行相应操作

				console.log('item', item)
				if (item.key === "about") {
					uni.navigateTo({
						url: "/sub/about/aboutUs/aboutUs",
					});
					return;
				}

				if (this.token) {
					if (item.key === 'report') {
						// uni.navigateTo({
						// 	url: "/pages/personal/testReport/testReport",
						// });
						uni.navigateTo({
							url: "/pages/middleScreening/result/result",
						});
					} else if (item.key === "org") {
						// 1.直接调接口获取数据 判断审核状态
						// 判断有没有认证过 可能有好几种状态 0 待审核 1 审核通过 2被驳回

						auditStatus().then(
							(res) => {
								// console.log(res, 'store.state.tokenstore.state.token')
								const data = res.rows;
								if (data.length > 0) {
									//
									const examineStatus = data[0].examineStatus;
									// 认证过机构
									if (examineStatus == 1) {
										// 认证成功
										uni.navigateTo({
											url: `/sub/personal/promotionManger/promotionManger`,
										});
									} else {
										// 认证中或者认证失败
										uni.navigateTo({
											url: `/sub/personal/orgManger/orgManger?data=${JSON.stringify(
                      data[0]
                    )}`,
										});
									}
								} else {
									// 未提交过
									uni.navigateTo({
										url: `/sub/personal/orgManger/orgManger?data=''`,
									});
								}
							},
							(err) => {}
						);
					}
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: "请登录后进行操作",
						icon: "https://cdn.uviewui.com/uview/demo/toast/error.png",
					});
				}
			},
			// 第一步获取用的信息 登录逻辑
			handleLogin() {
				uni.navigateTo({
					url: "/pages/personal/login/login",
				});
			},
			getCode() {
				//
				const _this = this
				wx.login({
					success(res) {
						if (res.code) {
							_this.code = res.code;

						} else {
							console.log("获取微信code失败！" + res.errMsg);
						}
					},
					fail(err) {
						console.log(err, "errerr");
					},
				});
			}
		},
		// 页面加载
		onLoad() {
			uni.hideTabBar();
			const _this = this
			// this.report()
		},
		onShow() {
			this.$store.dispatch("checkUser");
			this.getCode();
			this.report()
		},

	};
</script>

<style lang="scss">
	page {}

	// --------
	.fixed {
		position: fixed;
		top: 960rpx;
		right: -10rpx;
	}

	.kf_button {

		background-color: rgba(255, 255, 255, 0);
		border: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		// height: 100rpx;
	}

	.kf_button::after {
		border: 0px;
	}

	.connect {
		width: 108rpx;
		height: 36rpx;
		background: #336c74;
		border-radius: 18rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #66ffb5;
		line-height: 36rpx;
		text-align: center;
	}

	.kf_image {
		z-index: 9999;
		width: 108rpx;
		height: 108rpx;
	}

	// -----
	.bgbg {
		// background: linear-gradient(180deg, #c8fae2 0%, #ffffff 120%);
		padding-bottom: 172rpx;
		min-height: 85vh;
	}

	.u-grid-item {
		width: 574rpx !important;
		height: 158rpx !important;
	}

	.personal {
		// background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/bg.png");
		background-position: right top;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;


		.card {
			// height: 16vh;
			// background-color: #fdfffe;
			// margin-left: 10rpx;
			// box-shadow: 10rpx 10rpx 10rpx #dfe0e0;
			// width: 690rpx;
			// height: 180rpx;
			// background: #ffffff;
			// background: url('../../static/personal/ScreeningResult.png') center 100%/cover;
			// box-shadow: 4px 6px 18px 0px rgba(30, 90, 102, 0.1);
			border-radius: 20rpx;
			opacity: 1;
			margin: 44rpx auto;

			.u-icon__img {
				padding-top: 6px !important;
				width: 574rpx;
				height: 158rpx;
			}
		}

		.login_box {
			display: flex;
			align-items: center;
			// height: 100px;
			background-color: #ffffff;
			width: 680rpx;
			height: 182rpx;
			border-radius: 20rpx;
			margin-top: 40rpx;
			margin-bottom: 44rpx;

			.xiaozi {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				// color: #336c74;
				color: #B5C3E0;
			}

			h1 {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #003941;
				line-height: 48rpx;
			}

			.user_avatar {
				width: 210rpx;

				.u-avatar {
					margin: auto;
					// border: 2px solid #e9f0ff;
				}
			}

			.login_btn {
				flex: 1;
				// padding-left: 20rpx;
				font-size: 20px;
				font-weight: 600;

				.text {
					font-size: 14px;
					font-weight: 200;
					display: block;
					margin-top: 30rpx;
				}
			}
		}

		.opt {
			margin-top: 10rpx;

			.grid-text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #336c74;
				line-height: 34rpx;
				margin-top: 16rpx;
			}
		}

		.join_qun {
			width: 690rpx;
			height: 176rpx;
			background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/center.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 20rpx;
			opacity: 1;
			margin: 0 auto;
			margin-top: 40rpx;

			.text1 {
				font-size: 28rpx;
				padding-top: 40rpx;
				padding-left: 50rpx;
			}

			.text2 {
				margin-top: 8rpx;
				margin-left: 50rpx;
				width: 180rpx;
				height: 48rpx;
				background: #004751;
				border-radius: 12px 12px 12px 12px;
				opacity: 1;
				font-size: 12px;
				text-align: center;
				color: #66ffb5;
				line-height: 48rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// flex-direction: column;
			}
		}

		.fengxian {
			width: 690rpx;
			height: 128rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: auto;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				// margin: ;
				padding-left: 40rpx;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #003941;
				line-height: 20px;
			}

			.right {
				padding-right: 50rpx;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #336c74;
				line-height: 17px;
			}
		}

		.img_atten {
			margin: auto;
			margin-top: 30rpx;

			width: 690rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #003941;
				line-height: 40rpx;
				padding-top: 30rpx;
				margin-left: 40rpx;
			}

			.img {
				.u-image {
					margin: auto;
				}

				display: flex;
				justify-content: space-between;
				text-align: center;
				margin-top: 40rpx;

				.left {
					margin-left: 56rpx;
				}

				.right {
					margin-right: 54rpx;
				}

				.text {
					margin-top: 20rpx;

					h1 {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: bold;
						color: #336c74;
						line-height: 36rpx;
					}
				}
			}
		}
	}

	.ScreeningResult {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.cha {
		width: 574rpx;
		height: 158rpx;
		display: block;
		border-radius: 80rpx;
		box-shadow: 4px 6px 18px 0px rgba(30, 90, 102, 0.1);
	}
	.cha image{
		width: 574rpx;
		height: 158rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.empty2 {
		margin-top: 30rpx;
		width: 380rpx !important;
		height: 322rpx !important;
		border-radius: 0 !important;
		box-shadow: none
	}
	button::after{
	  border: 0;
	}
</style>
